import React from "react";
import './index.css'
import { Button, Flex,Input,Form } from "antd";
import type { FormProps } from 'antd';
import { UserOutlined,LockOutlined,PhoneOutlined,CreditCardOutlined } from '@ant-design/icons';
import { useNavigate } from "react-router-dom";

type FieldType = {
  username: string;
  password: string;
  phone:string;
  id_number:string;
};

const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
  console.log('Success:', values);
  // 发起请求
};

const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
  console.log('Failed:', errorInfo);
};

const Register: React.FC = () => {
  const navigator = useNavigate()
  return(
    <div className="wrap">
    <Flex vertical className="container">
      <Flex vertical className="text-align-center">
        <span className="title">数字马力</span>
        <div className="subTitle">数字马力培训pc大厦</div>
      </Flex>

      <Form
        name="normal_login"
        className="m-p-20"
        initialValues={{ remember: true }}
        onFinish={onFinish}
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: '请输入账号!' }]}
        >
          <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入账号" />
        </Form.Item>
        <Form.Item
          name="passwordOne"
          rules={[{ required: true, message: '请输入密码!'},
            ({getFieldValue}) => ({
              validator(_, value) {  
                if (value && value.length < 6) {  
                  return Promise.reject(new Error('密码长度至少为6位!'));  
                }  
                return Promise.resolve();  
              }, 
            })
          ]}
        >
          <Input.Password
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="请输入密码"
          />
        </Form.Item>
        <Form.Item
          name="password"
          dependencies={['passwordOne']}
          rules={[{ required: true, message: '请再次输入密码!'},
            ({getFieldValue}) => ({
              validator(_, value) {
                if (!value || getFieldValue('passwordOne') === value) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('2次密码不一致!'));
              },
            })
          ]}
        >
          <Input.Password
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="请再次输入密码"
          />
        </Form.Item>
        <Form.Item
          name="phone"
          rules={[{ required: true, message: '请输入手机号!' },
            ({getFieldValue}) => ({
              validator(_, value) {
                if (value.length == 11){
                  return Promise.resolve();
                }
                return Promise.reject(new Error('请输入11位手机号!'));
              }
            })
          ]}
        >
          <Input prefix={<PhoneOutlined className="site-form-item-icon" />} placeholder="请输入手机号" />
        </Form.Item>
        <Form.Item
          name="id_number"
          rules={[{ required: true, message: '请输入身份证!' }]}
        >
          <Input prefix={<CreditCardOutlined className="site-form-item-icon" />} placeholder="请输入身份证" />
        </Form.Item>
        <Form.Item >
          <Button type="primary" htmlType="submit" style={{width:'100%'}}>
            注册
          </Button>
          <Flex justify="flex-end">
            <span className="cursor">有账号去 <span onClick={() => navigator('/login')} style={{color:'skyblue'}}>登录</span></span>
          </Flex>
        </Form.Item>
      </Form>
    </Flex>
  </div>
  )
}

export default Register